{extend name='view/common/container'}
{block name="content"}
<div style="margin:0 15px 15px 15px;">
	<el-card shadow="never" style="min-height:650px;">
		<el-row style="margin-bottom:12px; margin-top:12px;">
			<el-col :span="21">
				<el-button type="success" size="mini" icon="el-icon-plus"  @click="dialog.addDialogStatus = true">创建</el-button>
				<el-button type="danger" size="mini" icon="el-icon-delete"  @click="deleteMenu()">卸载</el-button>
				<el-button type="warning" size="mini"  icon="el-icon-plus" :disabled="single" @click="field">字段管理</el-button>  
			</el-col>
			<el-col :span="3" style="text-align:right">
				<table-tool :expand_status="true" :expand="expand" @toggle="toggleRowExpansion" @refesh_list="loadlist" ></table-tool>
			</el-col>
		</el-row>

		<el-table :header-cell-style="{ background: '#eef1f6', color: '#606266' }" v-loading="loading" highlight-current-row :default-expand-all="expand" @current-change="handleCurrentChange" :tree-props="{children: 'children'}" row-key="menu_id" ref="multipleTable" border class="eltable" :data="list"   style="width: 100%"  >
			<el-table-column  property="menu_id" align="center" type='' label="编号" width="70"></el-table-column>
			<el-table-column property="title" width="240" label="模型名称"></el-table-column>
			<el-table-column property="table_name" label="数据表名"></el-table-column>
			<el-table-column align="center" property="status" label="状态">
				<template slot-scope="scope">
					<el-switch :active-value="1" :inactive-value="0" @change="update(scope.row,'status')" v-model="scope.row.status"></el-switch>
				</template>
			</el-table-column>
			<el-table-column width="90" align="center" property="sortid" label="排序">
				<template slot-scope="scope">
					<el-input style="width:60px;" size="mini" placeholder="排序" @blur.stop="update(scope.row,'sortid')" v-model="scope.row.sortid"></el-input>
				</template>
			</el-table-column>
			<el-table-column label="操作" :fixed="false" align="center" width="180">
				<template slot-scope="scope">
					<el-button size="mini" @click="editor(scope.row)" icon="el-icon-edit-outline" type="primary">修改</el-button>
					<el-button size="mini" @click="deleteMenu(scope.row)" icon="el-icon-delete" type="danger">卸载</el-button>
				</template>
			</el-table-column>
		</el-table>
	</el-card>
</div>

<cms-add :show.sync="dialog.addDialogStatus" app_id="{$appid}" :list="list" :connects="connects" size="small" @refesh_list="loadlist"></cms-add>

<cms-update :show.sync="dialog.updateDialogStatus" :info="info" app_id="{$appid}" :list="list" :connects="connects"  size="small" @refesh_list="loadlist"></cms-update>
{/block}
		
{block name="script"}
<script src="__PUBLIC__/assets/libs/treeselect/vue-treeselect.umd.min.js"></script>
<link rel="stylesheet" href="__PUBLIC__/assets/libs/treeselect/vue-treeselect.min.css">
<script src="__PUBLIC__/components/sys/menu.js"></script>
<script src="__PUBLIC__/assets/js/app.js"></script>

<script>
new Vue({
	el: '#app',
	data() {
		return {
			dialog: {
				addDialogStatus : false,
				updateDialogStatus : false,
			},
			expand:true,
			id:'',
			single:true,
			list: [],
			connects:[],
			connect:'',
			tablename:'',
			tableList:[],
			app_list:[],
			info:{},
			loading: false,
			active:'{$appid}'
		};
	},
	methods: {
		editor(row) {
			axios.post(base_url+'/Sys.Base/getMenuInfo',{menu_id:row.menu_id}).then(res => {
				this.dialog.updateDialogStatus = true
				this.info = res.data.data
			})
		},
		selectmenu(val){
			var path = {
				title:'菜单管理',
				url:base_url+'/Sys.Base/menu',
				fullurl:base_url+'/Sys.Base/menu?appid='+val.app_id
			}
			this.setTags(path)
			location.href = path.fullurl
		},
		field(){
			var path = {
				title:'字段管理',
				url:base_url+'/Sys.Base/fieldList',
				fullurl:base_url+'/Sys.Base/fieldList?menu_id='+this.id
			}
			this.setTags(path)
			location.href = path.fullurl
		},
		setTags(path){
			var noUrl = true
			var changeData = false
			if(Cookies.get('menu')){
				var tags = JSON.parse(Cookies.get('menu'))
				tags.forEach(item=>{
					if(item.url == path.url){
						noUrl = false 
						if(item.fullurl !== path.fullurl){
							changeData = true
						}
					}
				})
				if(noUrl){
					tags.push(path)
					Cookies.set('menu',JSON.stringify(tags))
				}
				
				if(changeData){
					tags.forEach(item=>{
						if(item.url == path.url){
							item.fullurl = path.fullurl
						}
					})
					Cookies.set('menu',JSON.stringify(tags))
				}
			}
		},
		handleCurrentChange(val) {
			this.id = val.menu_id
			this.single = false
		},
		toggleRowExpansion(){
			this.expand = !this.expand
			this.list.forEach(item=>{
				this.$refs.multipleTable.toggleRowExpansion(item,this.expand)
			})
		},
		deleteMenu() {
			this.$confirm('确定卸载吗?', '提示', {
				confirmButtonText: '确定',
				cancelButtonText: '取消',
				type: 'warning'
			}).then(() => {
				axios.post(base_url+'/Sys.Base/deleteMenu',{menu_id:this.id}).then(res => {
					if(res.data.status == 200){
						this.$message({message: '操作成功', type: 'success'})
						this.loadlist()
					}else{
						this.$message.error('操作失败')
					}
					
				})
			}).catch(() => {})
		},
		update(row,field){
			axios.post(base_url+'/Sys.Base/updateMenuExt',{menu_id:row.menu_id,[field]:row[field]}).then(res => {
				if(res.data.status == 200){
					this.$message({message: '操作成功', type: 'success'})
				}else{
					this.$message.error('操作失败')
				}
			})
		},
		loadlist() { 
			this.loading = true
			axios.post(base_url+'/Sys.Base/menu',{app_id:'{$appid}'}).then(res => {
				this.list = res.data.list
				this.connects = res.data.connects
				this.connect = res.data.defaultConnect
				this.tableList = res.data.tableList
				this.app_list = res.data.app_list
				this.loading = false
			})
		},
	},
	mounted() {
		this.loadlist()
	},
})
</script>
{/block}